<template>
  <div class="hello">
    <h2>todulist_vue-cli版本</h2>
    <topCpm @gettopson="getTopData"></topCpm>
    <div>
      <ul>
        <li 
          v-for="(item, index) in list" 
          :key="item.id" 
          :class="item.status ? 'color' : '' "
          @click="changeStatus(index)"
          v-show="newStatus === 'all' ? true : newStatus === 'finished' ? item.status : !item.status "
          >
          {{ item.name }}
        </li>
      </ul>
    </div>
    <bottomCpm @getbottomdata="changeNewStatus"></bottomCpm>
  </div>
</template>

<script>
import topCpm from './top/index.vue'
import bottomCpm from './bottom/index.vue'
export default {
  name: 'HelloWorld',
  components:{
    topCpm,
    bottomCpm
  },
  data(){
    return {
      list:[
        {
          id:1,
          name:'吃饭',
          status:true,
        },
        {
          id:2,
          name:'睡觉',
          status:false,
        },
        {
          id:3,
          name:'打豆豆',
          status:false,
        },
      ],
      newStatus:'all'// all显示全部 finished已完成 unfinished未完成
    }
  },
  methods:{
    getTopData(val){
      this.list.push({
        id:this.list.length + 1,
        name: val,
        status:false
      })
    },
    /**
     * li的点击事件
     * @i 为传过来的数组的下标
     */
    changeStatus(i){
      this.list[i].status = !this.list[i].status
    },
    /**
     * 接收bottom子组件传过来的数据
     */
    changeNewStatus(val){
      this.newStatus = val
      console.log(this.newStatus,'父组件拿到的东西')
    }
  }
}
// 下载vue-cli
// 创建vue-cli的项目
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  li{
    list-style: none;
    cursor: pointer;
  }
  .color{
    color: red;
  }
</style>
